<template>
	<view>
		<cmd-nav-bar back title="修改手机号"></cmd-nav-bar>
		<cmd-page-body type="top">
			<cmd-transition name="fade-up">
				<view class="modify">
					<view class="modify-password">
						<cmd-input v-model="mobile.oriphone" type="password" displayable maxlength="11"
							placeholder="请输入原手机号"></cmd-input>
					</view>
					<view class="modify-phone">
						<cmd-input v-model="mobile.phone" type="number" maxlength="11" placeholder="请输入新手机号">
						</cmd-input>
						<view class="modify-phone-getcode" :style="safety.state ? 'color: #2196F3;':''"
							@tap="!safety.state ? fnGetPhoneCode() : ''">{{!safety.state&&'获取验证码'||(safety.time+' s')}}
						</view>
					</view>
					<view class="modify-code">
						<cmd-input v-model="mobile.code" type="number" maxlength="6" placeholder="请输入短信验证码"></cmd-input>
					</view>
					<button class="btn-modify-hover"
						@tap="fnModify(mobile.oriphone, mobile.phone, mobile.code)">提交</button>
				</view>
			</cmd-transition>
		</cmd-page-body>
	</view>
</template>

<script>
	import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
	import cmdPageBody from "@/components/cmd-page-body/cmd-page-body.vue"
	import cmdTransition from "@/components/cmd-transition/cmd-transition.vue"
	import cmdInput from "@/components/cmd-input/cmd-input.vue"
	import {
		listing,
		publicing
	} from '../../../api/api.js'
	import {
		url
	} from '../../../api/request.js'

	export default {
		components: {
			cmdNavBar,
			cmdPageBody,
			cmdTransition,
			cmdInput
		},

		data() {
			return {
				mobile: {
					phone: '',
					code: '',
					oriphone: ''
				},
				passwordReg: /^\w+$/,
				phoneReg: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
				safety: {
					time: 60,
					state: false,
					interval: ''
				}
			};
		},

		created() {
			this.check_user_login()
		},

		methods: {
			check_user_login() {
				this.token = sessionStorage.user_token || localStorage.user_token;
				return this.token;
			},
			backlogin() {
				uni.navigateTo({
					url: '/pages/owner/index'
				})
			},
			/**
			 * 提交按钮点击执行
			 */
			fnModify(oriphone, phone, code) {
				let Url = `${url}/user/changeMobile/`
				let Data = {
					oriMobile: oriphone,
					corMobile: phone,
					sms_code: code,
					uid: sessionStorage.user_id
				}
				publicing(Url, Data)
					.then((res) => {
							localStorage.removeItem("user_token");
							localStorage.removeItem("user_name");
							localStorage.removeItem("user_id");
							localStorage.removeItem("stated");
							sessionStorage.removeItem("user_token");
							sessionStorage.removeItem("user_name");
							sessionStorage.removeItem("user_id");
							sessionStorage.removeItem("stated");
							this.check_user_login();
							this.backlogin();
						},
						uni.showToast({
							title: '修改成功，请重新登录',
							duration: 2000
						}),
						// this.backlogin();
					)
					.catch((err) => {
						uni.showToast({
							title: '修改失败，请重试',
							icon: 'none',
							duration: 2000
						})
						console.log(err)
					})
			},
			/**
			 * 获取验证码
			 */
			fnGetPhoneCode() {
				if (this.phoneReg.test(this.mobile.phone)) {
					let Url = `${url}/user/sms/${this.mobile.phone}/`
					listing(Url)
						.then((res) => {
							uni.showToast({
								title: "正在发送验证码",
								icon: "loading",
								success: () => {
									// 成功后显示倒计时60s后可在点击
									this.safety.state = true;
									// 倒计时
									this.safety.interval = setInterval(() => {
										if (this.safety.time-- <= 0) {
											this.safety.time = 60;
											this.safety.state = false;
											clearInterval(this.safety.interval);
										}
									}, 1000);
									uni.showToast({
										title: "发送成功",
										icon: "success"
									})
								}
							})
						})
						.catch((err) => {
							console.log(err)
						})
				} else {
					uni.showToast({
						title: "手机号不正确",
						icon: "none"
					})
				}
			}
		},

		beforeDestroy() {
			/**
			 * 关闭页面清除轮询器
			 */
			clearInterval(this.safety.interval);
		}
	}
</script>

<style>
	.modify {
		margin-top: 118upx;
		margin-right: 72upx;
		margin-left: 72upx;
	}

	.modify-phone {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx #dedede solid;
		margin-top: 40upx;
		margin-bottom: 40upx;
	}

	.modify-phone-getcode {
		color: #3F51B5;
		text-align: center;
		min-width: 140upx;
	}

	.modify-password,
	.modify-code {
		margin-bottom: 40upx;
		border-bottom: 2upx #dedede solid;
	}

	.btn-modify {
		margin-top: 100upx;
		border-radius: 50upx;
		font-size: 16px;
		color: #fff;
		background: linear-gradient(to right, #88a1f9, #9ac6ff);
	}

	.btn-modify-active {
		background: linear-gradient(to right, #365fff, #36bbff);
	}

	.btn-modify-hover {
		background: linear-gradient(to right, #365fdd, #36bbfa);
	}

	button[disabled] {
		color: #fff;
	}
</style>
